<template>
  <a-list :bordered="false">
    <a-list-item
      v-for="item in friendList"
      :key="item.wxid"
      :style="{ backgroundColor: selectedFriendWxid === item.wxid ? '#E8F3FF' : 'white' }"
      @click="handleGetInfo(item)"
    >
      <a-list-item-meta :title="item.nick" :description="item.remark">
        <template #avatar>
          <a-avatar shape="square" :trigger-icon-style="{ color: '#3491FA' }">
            <img alt="avatar" :src="item.avatarMinUrl" />
          </a-avatar>
        </template>
      </a-list-item-meta>
    </a-list-item>
  </a-list>
  <div style="display: flex; justify-content: center; padding-top: 16px; padding-bottom: 16px;">
    <a-pagination
      :total="count"
      :page-size="pageSize"
      size="mini"
      simple
      :current="current"
      @change="changePage"
    />
  </div>
</template>

<script lang="ts" setup>
  import { ref, watch } from 'vue';
  import { useFriendStore } from '@/store';
  import { Message } from '@arco-design/web-vue';
  import { getFriendList, getFriendInfo } from '@/api/weixin';

  const FriendStore = useFriendStore();
  const selectedFriendWxid = ref('')
  interface SearchForm {
    nick?: string;
    remark?: string;
    phone?: string;
    tags?: string;
  }
  interface FriendItem {
    wxid: string;
    nick: string;
    avatarMinUrl?: string;
    sex?: boolean;
    remark?: string;
    wxNum?: string;
  }

  const props = defineProps<{
    selectedWxid: string;
    selectedAvatar: string;
    searchForm: SearchForm; // 使用定义好的接口
    currentFriend?: FriendItem | null;
  }>();

  const current = ref(1);
  const pageSize = ref(10);
  const count = ref(0);
  const loading = ref(false);

  const friendList = ref<FriendItem[]>([]);
  // 搜索表单数据

  // 获取好友列表数据
  const fetchFriendList = async (wxid: string) => {
    loading.value = true;
    try {
      const res: any = await getFriendList(wxid, {
        field: {
          nick: props.searchForm.nick,
          remark: props.searchForm.remark,
          phone: props.searchForm.phone,
          tags: props.searchForm.tags,
        },
        page: current.value,
        pageSize: pageSize.value,
      });
      if (res.code === 20000) {
        count.value = res.data.count;
        friendList.value = res.data.list;
      } else {
        Message.error(res.msg || '获取好友列表失败');
      }
    } catch (error) {
      console.error('获取好友列表失败:', error);
    } finally {
      loading.value = false;
    }
  };

  const handleGetInfo = async (record: any) => {
    try {
      const res: any = await getFriendInfo({
        mywxid: props.selectedWxid,
        wxid: record.wxid,
      });
      if (res.code === 20000) {
        // 保存到状态
        selectedFriendWxid.value = res.data.wxid;
        FriendStore.selectedFriend(res.data.wxid,res.data.avatarMinUrl,res.data.nick,res.data.remark,res.data.isopenai ,res.data.isconfirmpay)         
        // await fetchFriendList(props.selectedWxid);
      } else {
        Message.error(res.msg || '获取微信信息失败');
      }
    } catch (error) {
      Message.error('获取微信信息失败');
    }
  };

  const changePage = async (e: any) => {
    current.value = e;
    await fetchFriendList(props.selectedWxid);
  };

  watch(
  () => props.selectedWxid,
  async (newWxid) => {
    if (newWxid) {
      await fetchFriendList(newWxid);
    }
  },
  { immediate: true }
);

  watch(
  () => props.searchForm,
  (newVal) => {
    if (props.selectedWxid && newVal) {
      fetchFriendList(props.selectedWxid);
    }
  },
  { deep: true, immediate: true }
);
</script>
